<template>
  <a-select
    show-search
    style="width: 100%" 
    v-model="subject" 
    :filter-option="filterOption"
    @change="handleChange">
    <a-select-opt-group v-for="d in subjectData" :key="d.id">
      <span slot="label">{{ d.name }}</span>
      <a-select-option v-for="s in d.sub2" :key="s.id" >
        {{ s.text }}
      </a-select-option>
    </a-select-opt-group>
  </a-select>
</template>

<script>
  import {
    getUrl
  } from '@/api/manage'
  export default {
    components: {
        VNodes: {
          functional: true,
          render: (h, ctx) => ctx.props.vnodes,
        },
      },
    props: {
      settings : {
         labelInvalue : false,
         showSearch  : false,
         defaultValue : '',
         allowClear : false,
         search : null,
         style : null,
         vModel: null,
         change: null,
         placeholder : ''
      }
    },
    data() {
      return {
          subjectData: [],
          initValue : '',
          subject : ''
      }
    },
    created() {
       if(this.settings.placeholder != undefined){
          this.placeholder = this.settings.placeholder
       }
      
      this.fetchSubject()
    },
    methods: {
      fetchSubject(params = {}) {
        return getUrl('/api/getSubject', params)
          .then(data => {
            this.subjectData = data.result
            if(data &&  data.result[0] && data.result[0].sub2[0]){
              this.subject =  data.result[0].sub2[0].id
              this.handleChange(this.subject, '')
              this.$emit('afertInit')
              this.initValue = data.result[0].sub2[0].id
            }
           
          })
      },
      handleChange(v1, v2){
         this.$emit('update:vModel',v1) 
         this.$emit('change',v1, v2)
      },
      clear(){debugger
        if(this.initValue){
          this.subject = this.initValue
          this.$emit('update:vModel', this.subject)
        }else{
             this.subject = []
        }
      },
      setDefault(value){
        this.subject = value
      },
      filterOption(input, option) {
            if(option.componentOptions.tag == 'a-select-option'){
              return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
              )
            }
      }
    }
  }
</script>
<style>
  .ant-select-dropdown-menu-item-selected,
  .ant-select-dropdown-menu-item-selected:hover {
    color: #52c41a;
    font-weight: 700;
    background-color: #fafafa;
  }
  .ant-table-row{
    cursor:pointer;
  }
  .ant-slider-track {
      background-color: #079af5;
  }
</style>
